<template>
    <el-dialog :visible.sync="visible" :title="!dataForm.id ? '新增' : '修改'" :close-on-click-modal="false">
        <el-form ref="dataFormRef" :model="dataForm" :rules="dataRules" label-width="100px"
                 @keyup.enter="submitHandle()">
            <#list formList as field>
                <#if field.formType == 'text'>
                    <el-form-item label="${field.fieldComment!}" prop="${field.attrName}">
                        <div slot="label">
                            <el-row>${field.fieldComment!}<p :class="[isClicked?'isShow':'isHide']">{{ZHtranslate.pl_stdxg.bo}}</p></el-row>
                        </div>
                        <el-input v-model="dataForm.${field.attrName}" placeholder="${field.fieldComment!}"></el-input>
                    </el-form-item>
                <#elseif field.formType == 'textarea'>
                    <el-form-item label="${field.fieldComment!}" prop="${field.attrName}">
                        <div slot="label">
                            <el-row>${field.fieldComment!}<p :class="[isClicked?'isShow':'isHide']">{{ZHtranslate.pl_stdxg.bo}}</p></el-row>
                        </div>
                        <el-input type="textarea" v-model="dataForm.${field.attrName}"></el-input>
                    </el-form-item>
                <#elseif field.formType == 'editor'>
                    <el-form-item label="${field.fieldComment!}" prop="${field.attrName}">
                        <div slot="label">
                            <el-row>${field.fieldComment!}<p :class="[isClicked?'isShow':'isHide']">{{ZHtranslate.pl_stdxg.bo}}</p></el-row>
                        </div>
                        <el-input type="textarea" v-model="dataForm.${field.attrName}"></el-input>
                    </el-form-item>
                <#elseif field.formType == 'select'>
                    <#if field.formDict??>
                        <el-form-item label="${field.fieldComment!}" prop="${field.attrName}">
                            <div slot="label">
                                <el-row>${field.fieldComment!}<p :class="[isClicked?'isShow':'isHide']">{{ZHtranslate.pl_stdxg.bo}}</p></el-row>
                            </div>
                            <fast-select v-model="dataForm.${field.attrName}" dict-type="${field.formDict}"
                                         placeholder="${field.fieldComment!}"></fast-select>
                        </el-form-item>
                    <#else>
                        <el-form-item label="${field.fieldComment!}" prop="${field.attrName}">
                            <div slot="label">
                                <el-row>${field.fieldComment!}<p :class="[isClicked?'isShow':'isHide']">{{ZHtranslate.pl_stdxg.bo}}</p></el-row>
                            </div>
                            <el-select v-model="dataForm.${field.attrName}" placeholder="请选择">
                                <el-option label="请选择" value="0"></el-option>
                            </el-select>
                        </el-form-item>
                    </#if>
                <#elseif field.formType == 'radio'>
                    <#if field.formDict??>
                        <el-form-item label="${field.fieldComment!}" prop="${field.attrName}">
                            <div slot="label">
                                <el-row>${field.fieldComment!}<p :class="[isClicked?'isShow':'isHide']">{{ZHtranslate.pl_stdxg.bo}}</p></el-row>
                            </div>
                            <fast-radio-group v-model="dataForm.${field.attrName}"
                                              dict-type="${field.formDict}"></fast-radio-group>
                        </el-form-item>
                    <#else>
                        <el-form-item label="${field.fieldComment!}" prop="${field.attrName}">
                            <div slot="label">
                                <el-row>${field.fieldComment!}<p :class="[isClicked?'isShow':'isHide']">{{ZHtranslate.pl_stdxg.bo}}</p></el-row>
                            </div>
                            <el-radio-group v-model="dataForm.${field.attrName}">
                                <el-radio :label="0">启用</el-radio>
                                <el-radio :label="1">禁用</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </#if>
                <#elseif field.formType == 'checkbox'>
                    <el-form-item label="${field.fieldComment!}" prop="${field.attrName}">
                        <div slot="label">
                            <el-row>${field.fieldComment!}<p :class="[isClicked?'isShow':'isHide']">{{ZHtranslate.pl_stdxg.bo}}</p></el-row>
                        </div>
                        <el-checkbox-group v-model="dataForm.${field.attrName}">
                            <el-checkbox label="启用" name="type"></el-checkbox>
                            <el-checkbox label="禁用" name="type"></el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                <#elseif field.formType == 'date'>
                    <el-form-item label="${field.fieldComment!}" prop="${field.attrName}">
                        <div slot="label">
                            <el-row>${field.fieldComment!}<p :class="[isClicked?'isShow':'isHide']">{{ZHtranslate.pl_stdxg.bo}}</p></el-row>
                        </div>
                        <el-date-picker type="date" placeholder="${field.fieldComment!}"
                                        v-model="dataForm.${field.attrName}"></el-date-picker>
                    </el-form-item>
                <#elseif field.formType == 'datetime'>
                    <el-form-item label="${field.fieldComment!}" prop="${field.attrName}">
                        <div slot="label">
                            <el-row>${field.fieldComment!}<p :class="[isClicked?'isShow':'isHide']">{{ZHtranslate.pl_stdxg.bo}}</p></el-row>
                        </div>
                        <el-date-picker type="datetime" placeholder="${field.fieldComment!}"
                                        v-model="dataForm.${field.attrName}"></el-date-picker>
                    </el-form-item>
                <#else>
                    <el-form-item label="${field.fieldComment!}" prop="${field.attrName}">
                        <div slot="label">
                            <el-row>${field.fieldComment!}<p :class="[isClicked?'isShow':'isHide']">{{ZHtranslate.pl_stdxg.bo}}</p></el-row>
                        </div>
                        <el-input v-model="dataForm.${field.attrName}" placeholder="${field.fieldComment!}"></el-input>
                    </el-form-item>
                </#if>
            </#list>
        </el-form>
        <template #footer>
            <el-button @click="visible = false">取消</el-button>
            <el-button type="primary" @click="submitHandle()">确定</el-button>
        </template>
    </el-dialog>
</template>

<script>
    import {queryById, save, update} from '@/api/${functionName}/${functionName}.js'
    import {Message, MessageBox} from 'element-ui';


    export default {
        name: "${functionName}AddOrUpdate",
        data() {
            return {
                ZHtranslate:{},
                visible: false,
                dataForm: {
                    <#list fieldList as field>
                    ${field.attrName}: ''<#sep>,
                    </#list>
                },
                dataRules: {
                    <#list fieldList as field>
                    <#if field.formRequired>
                    ${field.attrName}: [{required: true, message: '必填项不能为空', trigger: 'blur'}]<#sep>,
                    </#if>
                    </#list>
                }
            }
        },
        computed: {
            isClicked() {
                return this.$store.getters.buttonState
            }
        },
        created() {
            this.ZHtranslate = JSON.parse(sessionStorage.getItem('ZHBOlanguage'))
        },
        methods: {
            init(id) {
                this.visible = true
                // 重置表单数据
                if(this.$refs.dataFormRef){
                    this.$refs.dataFormRef.resetFields()
                }
                if (id) {
                    queryById({
                        id
                    }).then(res => {
                        Object.assign(this.dataForm, res.data.data)
                    })
                }
            },

            // 表单提交
            submitHandle() {
                let that = this
                this.$refs.dataFormRef.validate((valid) => {
                    if (!valid) {
                        return false
                    }
                    if (this.dataForm.id) {
                        update(this.dataForm).then(() => {
                            Message.success({
                                message: '操作成功',
                                duration: 500,
                                onClose: () => {
                                    this.visible = false
                                    that.$emit('refreshDataList')
                                }
                            })
                        })
                    }else{
                        save(this.dataForm).then(() => {
                            Message.success({
                                message: '操作成功',
                                duration: 500,
                                onClose: () => {
                                    this.visible = false
                                    that.$emit('refreshDataList')
                                }
                            })
                        })
                    }
                })
            }
        }
    }
</script>